.main-width {
    margin: auto;

    @extend %page-main-width;
}

.font-bold {
    font-weight: bold;
}

@each $key in (100, 200, 300, 400, 500, 600, 700) {
    .font-weight-#{$key} {
        font-weight: #{$key};
    }
}

@each $key in (1, 2, 3, 4, 5) {
    .text-ellipsis-#{$key} {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: #{$key};
    }
}

$text-list: (
    'main',
    'primary',
    'subtitle',
    'tips',
    'error',
    'success',
    'white',
    'up',
    'down',
);

@each $key in $text-list {
    .text-#{$key} {
        @extend %text-#{$key};
    }
}

// animate.scss
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* Fading entrances  */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
}

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@keyframes FadeEnter {
    from {
        transform: translateY(50%);
    }

    to {
        transform: translateY(0);
    }
}

.animate-enter {
    -webkit-animation-name: FadeEnter;
    animation-name: FadeEnter;
    animation-duration: 0.3s;
}
